<template>
  <nut-form>
    <nut-cell
      title="异常时间"
      :desc="String(formData.time)"
      @click="dateshow = true"
    ></nut-cell>
    <nut-popup v-model:visible="dateshow" position="bottom">
      <nut-date-picker
        title="选择日期"
        v-model="dateval"
        type="datetime"
        :min-date="min"
        :max-date="max"
        :three-dimensional="false"
        @confirm="dateconfirm"
        :formatter="formatter"
      />
    </nut-popup>

    <nut-form-item label="异常地址"> </nut-form-item>
    <nut-cell
      title="异常类型"
      :desc="String(formData.desc)"
      @click="show = true"
    ></nut-cell>
    <nut-popup v-model:visible="show" position="bottom">
      <nut-picker
        v-model="type"
        :columns="abnormalType"
        title="请选择"
        @confirm="confirm"
        @cancel="show = false"
      />
    </nut-popup>
    <nut-form-item label="描述">
      <nut-textarea
        v-model="formData.addr"
        autosize
        placeholder="请输入异常描述(可选)"
        limit-show
        :max-length="300"
      />
    </nut-form-item>
    <nut-form-item label="异常照片">
      <nut-uploader
        :url="uploadUrl" :data="defaultFileList" 
        maximum="6"
        multiple
      >
      </nut-uploader>
    </nut-form-item>
  </nut-form>
  <nut-button block type="info" @click="commit">提交</nut-button>
</template>
  <script setup>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { addAbnormal } from '../../utils/api'
import Taro from "@tarojs/taro";
const min = new Date(2020, 0, 1, 10, 40);
const max = new Date(2025, 10, 1, 23, 29);
const dateval = ref(new Date(2022, 4, 10));
const formatter = (type, option) => {
  switch (type) {
    case "year":
      option.text += "年";
      break;
    case "month":
      option.text += "月";
      break;
    case "day":
      option.text += "日";
      break;
    case "hour":
      option.text += "时";
      break;
    case "minute":
      option.text += "分";
      break;
    default:
      option.text += "";
  }
  return option;
};
const dateconfirm = ({ selectedValue }) => {
  formData.value.time = selectedValue;
  console.log(selectedValue);
  dateshow.value = false;
};
const defaultFileList = ref([])
const uploadUrl = ref("/abnormal/img")
const formData = ref({
  time: "",
  address: "",
  longitude: 1,
  latitude: 2,
  type: "",
  desc: "",

});
const show = ref(false);
const dateshow = ref(false);
const val = ref();
const abnormalType = ref([{ text: "司机身体不适", value: "1" }]);

const confirm = ({ selectedValue, selectedOptions }) => {
  console.log(selectedValue[0], selectedOptions[0]);
  formData.value.type = selectedValue[0].value;
  formData.value.desc = selectedOptions[0].text;
  show.value = false;
};
const commit = () => {
  addAbnormal(formData.value)
};
onMounted(() => {
  Taro.getLocation({
    type: "gcj02",
    success: function (res) {
      console.log(res);
      formData.value.latitude = res.latitude;
      formData.value.longitude = res.longitude;
    },
  });
});
</script>
  